	<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>短信项目视图</title>
<link href="../../layui/css/layui.css" rel="stylesheet" type="text/css">
<link href="../../css/style.css" rel="stylesheet" type="text/css">
<script src="../../layui/layui.js"></script>
<link href="../../layui/css/iconfont/iconfont.css" rel="stylesheet"
	type="text/css">
<script src="../../layui/css/iconfont/iconfont.js"></script>
<script src="../../js/jquery-1.8.3.js"></script>
<script src="../../js/util.js"></script>
<script src="../../layui/src/lib/extend/echarts.js"></script>
<script type="text/javascript">
        layui.use([ 'layer', 'table', 'form', 'jquery', 'element','echarts' ], function(exports) {
		var table = layui.table;
		var echarts = layui.echarts;
		var layer = layui.layer;
		var form = layui.form;
		var $ = layui.$;
		console.log(echarts);
		var myChart = echarts.init(document.getElementById('main'));
		var option = {
			tooltip : {
				trigger : 'axis',
				axisPointer : { // 坐标轴指示器，坐标轴触发有效
					type : 'shadow' // 默认为直线，可选为：'line' | 'shadow'
				}
			},
			legend : {
				data : [ '停止项目', '在发项目', '暂停项目' ]
			},
			grid : {
				left : '3%',
				right : '4%',
				bottom : '3%',
				containLabel : true
			},
			yAxis : {
				type : 'value'
			},
			xAxis : {
				type : 'category',
				data : []
			},
			series : [
				{
					name : '停止项目',
					type : 'bar',
					stack : '总量',
					label : {
						normal : {
							show : true,
							position : 'insideRight'
						}
					},
					data : []
				},
				{
					name : '在发项目',
					type : 'bar',
					stack : '总量',
					label : {
						normal : {
							show : true,
							position : 'insideRight'
						}
					},
					data : []
				},
				{
					name : '暂停项目',
					type : 'bar',
					stack : '总量',
					label : {
						normal : {
							show : true,
							position : 'insideRight'
						}
					},
					data : []
				}
			]
		};;
		myChart.setOption(option);   
                var tableData = {
			elem : "#table", //表格id
			id : "modelReload", //id
			url : '/smsMgrView/findview',
			method : 'post',
			request : {
				pageName : 'page',
				limitName : 'limit'
			},
			response : {
				statusName : 'code',
				statusCode : 0,
				msgName : 'msg',
				countName : 'count',
				dataName : 'data'
			},
			page : false,
			count : "count",
			limit : 10,
			limits : [ 10, 20, 30, 40, 50 ],
			layout : [ 'prev', 'page', 'next' ],
			prev : "上一页",
			next : "下一页",
			cols : [ [ //表头
				{
					field : 'countyName',
					width : '25%',
					title : '地市'
				}
				, {
					field : 'runNum',
					width : '25%',
					title : '在发项目数'
				}
				, {
					field : 'waitNum',
					width : '25%',
					title : '暂停项目数'
				}
				, {
					field : 'stopNum',
					width : '25%',
					title : '停止项目数'
				}
			] ]
		};
		table.render({
			elem : "#table", //表格id
			id : "modelReload", //id
			url : '/smsMgrView/findview',
			totalRow: true,
			method : 'post',
			request : {
				pageName : 'page',
				limitName : 'limit'
			},
			response : {
				statusName : 'code',
				statusCode : 0,
				msgName : 'msg',
				countName : 'count',
				dataName : 'data'
			},
			page : false,
			where:{flag:'county'},
			count : "count",
			limit : 10,
			limits : [ 10, 20, 30, 40, 50 ],
			layout : [ 'prev', 'page', 'next' ],
			prev : "上一页",
			next : "下一页",
			cols : [ [ //表头
				{
					field : 'countyName',
					width : '25%',
					title : '地市'
					, totalRowText: '合计'
				}
				, {
					field : 'runNum',
					width : '25%',
					title : '在发项目数'
					, totalRow: true
				}
				, {
					field : 'waitNum',
					width : '25%',
					title : '暂停项目数'
					, totalRow: true
				}
				, {
					field : 'stopNum',
					width : '25%',
					title : '停止项目数'
					, totalRow: true
				}
			] ],
		done : function(res, curr, count) {
    myChart.showLoading({text: '正在努力的读取数据中...'});
    console.log(res);
    console.log(curr);
    console.log(count);
    var datas = res.data;
    var countyNames=[];
    var stopNums =[];
    var runNums = [];
    var waitNums =[];
    for(var i=0;i<datas.length-1;i++){
    
     countyNames.push(datas[i].countyName);
     stopNums.push(datas[i].stopNum);
     runNums.push(datas[i].runNum);
     waitNums.push(datas[i].waitNum);
    }
    console.log(countyNames);
    console.log(stopNums);
    console.log(runNums);
    console.log(waitNums);
     myChart.setOption({
           xAxis: {
               data: countyNames
            },
            series: [{
               // 根据名字对应到相应的系列
               name: '停止项目',
               data: stopNums
            },{
            name: '在发项目',
               data: runNums
            },{
            name: '暂停项目',
               data: waitNums
            }]
        });
				myChart.hideLoading();
				}
		});
		$('#query').on('click', function () {
    		var cityId = $("#cityId").val();
                table.reload('modelReload', {
                    method: 'post',
                    page: {
                        curr: 1
                    },
                    where: {
                        cityId: cityId,
                    }
                });
              });
                $("#download").on('click', function() {
          
		   var url = "/smsMgrView/download?flag=county" + "&cityId=" + $("#cityId").val();
		   location.href=url;
		});
		
  });

       
       
    </script>
<body>
	<div class="layui-content-body">
		<div class="scroll-box">
			<div class="breadcrumb-box">
				<span class="layui-breadcrumb" lay-separator="|"> <a href="">首页&nbsp;</a>
					<a href=""> &nbsp;报表管理 </a> <a href=""> &nbsp;短信项目视图 </a>
				</span>
			</div>
			<div class="content-box">
				<div class="form-select-box">
					<div class="layui-form layui-form-pane">
						<div class="layui-form-item">
							<div class="layui-block" pane="">
								<label class="layui-form-label" style="width:120px">统计方式</label>
								<div class="layui-input-block">
									<a href="smsViewManage.html"> 
									<input type="radio" title="按地市" name="way" value="smsViewManage"></a>
									 <a href="smsViewManageCounty.html"> 
									 <input type="radio"title="按区县" name="way" value="smsViewManageCounty" checked=""></a>
									<div class="layui-inline">
										<label class="layui-form-label">地市</label>
										<div class="layui-input-block">
											<select lay-filter="cityId" id="cityId">
												<option value="">请选择</option>
												<option value="11">苏州</option>
												<option value="12">淮安</option>
												<option value="13">宿迁</option>
												<option value="14">南京</option>
												<option value="15">连云港</option>
												<option value="16">徐州</option>
												<option value="17">常州</option>
												<option value="18">镇江</option>
												<option value="19">无锡</option>
												<option value="20">南通</option>
												<option value="21">泰州</option>
												<option value="22">盐城</option>
												<option value="23">扬州</option>
											</select>
										</div>
									</div>
									<div class="layui-inline">
										<button class="layui-btn layui-btn-normal" id="query">查&nbsp;询</button>
										<button class="layui-btn layui-btn-normal" id="download">导&nbsp;出</button>
									</div>					
								</div>
								<!--表格-->
									<div class="layui-table" style="width:50%;float:left;">
										<table id="table" lay-filter="table"></table>
									</div>
									<div class="layui-table"
										style="width:50%;float:left;width: 600px;height:500px"
										id="main"></div>
							</div>
						</div>
					</div>
					<!-- <div class="table-box">
                <table class="layui-table" id="table">
                </table>
            </div> -->
				</div>
			</div>
		</div>
	</div>
</body>
</html>